<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>投票系统</title>
    <script src="../Vue/vue.js"></script>
    <script src="../Vue/vue-router.js"></script>
    <script src="../axios/axios.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #index {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .header {
            height: 60px;
            background-color: rgba(0, 40, 77, 1);
        }

        .container {
            display: flex;
            flex: 1;
        }

        .container .left {
            width: 280px;
            background-color: rgba(0, 21, 41, 1);
        }

        .container .right {
            flex: 1;
            background-color: #f2f2f2;
            padding: 20px;
        }

        .content {
            width: 100%;
            height: 100%;
            background-color: #fff;
        }

        .title {
            font-size: 22px;
            color: #fff;
            line-height: 60px;
            margin-left: 26px;
            display: inline-block;
        }

        .header .right {
            float: right;
            height: 60px;
        }

        .header .exit {
            font-size: 14px;
            color: #fff;
            line-height: 60px;
            cursor: pointer;
            margin-right: 16px;
        }

        .header .username {
            color: #fff;
            cursor: pointer;
            margin-right: 25px;
        }

        .touxiang {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #fff;
            position: relative;
            border-radius: 50%;
            top: 12px;
            left: -8px;
            cursor: pointer;
        }

        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
        }

        .menu-title {
            color: #fff;
        }

        .menu-sub-title {
            color: #aeaeae;
        }
    </style>
</head>
<body>
    <div id="app">
        <router-view></router-view>
    </div>
<template id="index">
    <div>
        <div class="header">
            <div class="title">
                厦门市思明区人民法院投票系统
            </div>
            <div class="right">
                <span class="touxiang">
                    <img class="center" :src="logo" alt="" width="46" height="46">
                </span>
                <span class="username">{{username}}</span>
                <span class="exit">退出</span>
            </div>
        </div>
        <div class="container">
            <div class="left">
                <ul>
                    <li v-for="(item,index) in menu">
                        <div @click="subshow(index)">
                            <img src="tpimg/u9.png" alt="">
                            <span class="menu-title">{{item.title}}</span>
                            <img v-if="item.children && item.children.length != 0" src="tpimg/u17.png" alt="">
                        </div>
                        <ul v-if="item.children_show">
                            <li v-for="child in item.children" class="menu-sub-title">
                                {{child.title}}
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="right">
                <div class="content">

                </div>
            </div>
        </div>
    </div>
</template>
    <script>
        var index=Vue.extend({
            template:"#index",
            data(){
                return{
                    username:"韩梅梅",
                    logo:"tpimg/u59.png",
                    menu:[

                    ]
                }
            },
            methods:{
                subshow(index){
                    this.menu[main].children_show=! this.menu[main].children_show;
                }
            },
            created(){
                var _this=this;
                axios.post("https://mockapi.eolinker.com/xx3S3Ha118800c38fa6132a898e6ee4aabb33b7b96a3587/index?index=1").then(
                    function (res) {
                        _this.username=res.data.username;
                        _this.logo=res.data.logo;
                    }
                );
                axios.post("https://mockapi.eolinker.com/xx3S3Ha118800c38fa6132a898e6ee4aabb33b7b96a3587/liebiao?list=1").then(
                    function (res) {
                        _this.menu=res.data;

                    }
                );

            }
        });
        var router=new VueRouter({
            routes:[
                {path:"/",component:index,name:"index"}
            ]
        });
        var vue=new Vue({
            el:"#app",
            router,
            data:{

            },
            methods:{

            }
        });
    </script>
</body>
</html>